<template>
    <div class="shop settle-sub-box">
        <div class="search">
            <search
                :placeholder="'搜索网点名或地址'"
                v-model="searchName"
                :cancel-text="' '"
                :auto-fixed="false"
                @on-focus="searchFocus"
                @on-blur="searchBlur"
                ref="search">
                <div slot="right" class="search-right" v-if="saveBtnShow">
                    <button @click="searchSubmit">确定</button>
                </div>
                <div slot="left" class="search-left" @click="back">
                    <i class="el-icon-arrow-left"></i>
                </div>
            </search>
        </div>
        <div class="cont">
            <div class="head" v-show="showArea">
                <div class="addr" v-for="(list, i) in areaList" :key="i" :class="{active: list.select}"
                     @click="changeArea(list)">
                    <div>{{list.name}}</div>
                </div>
            </div>
            <div class="shop-list" v-if="showShop">
                <div class="list" v-for="(item, index) in shopList" :key="index" @click="chooseShop(item)">
                    <div class="name">{{item.name}}</div>
                    <div class="address">
                        <!--                    <i class="iconfont icon-address"></i>-->
                        {{item.address}}
                    </div>
                    <div class="tips" :class="{full: item.kzCount<item.onceCount}">
                        <span v-if="item.kzCount<item.onceCount">当前场次已约满</span>
                        <span v-else>当前场次剩余{{item.kzCount}}个</span>
                    </div>
                </div>
                <infinite-loading @infinite="infiniteHandler" spinner="spiral" :distance="100">
                    <div slot="no-more"></div>
                    <!--                <div slot="no-more" class="noMore">没有更多记录了</div>-->
                    <div slot="no-results"></div>
                    <!--                <div slot="no-results" class="empty">暂无预约记录</div>-->
                    <div slot="error" slot-scope="{ trigger }">
                        <!--                    Error message, click <a href="javascript:;" @click="trigger">here</a> to retry-->
                    </div>
                </infinite-loading>
                <div class="empty" v-if="!shopList[0]&&!shopLoad">暂无网点</div>
            </div>
        </div>
    </div>
</template>

<script>
    import {Search} from 'vux'

    export default {
        data() {
            return {
                searchName: '', // 搜索关键字
                saveBtnShow: false, // 搜索确认按钮是否显示
                areaList: [], // 区县列表
                shopList: [], // 门店列表
                currentArea: null, // 当前选择区县
                index: 1, // 页数
                showShop: false, // 是否显示门店
                shopLoad: false, // 门店是否正在请求中
                showArea: true // 显示区县
            }
        },
        mounted() {
            this.getArea()
        },
        methods: {
            getArea() {
                this.$http.get('/getStoreDisplay/getAllArea').then(result => {
                    if (result.success) {
                        result.data.map(e => {
                            e.select = false
                        })
                        this.areaList = result.data
                        this.changeArea(this.areaList[0])
                    }
                })
            },
            changeArea(list) {
                this.showShop = false
                this.areaList.map(e => {
                    e.select = false
                })
                list.select = true
                this.currentArea = list
                this.$nextTick(() => {
                    this.index = 1
                    this.shopList = []
                    this.showShop = true
                })
            },
            searchSubmit() {
                if (this.searchName) {
                    this.showShop = false
                    this.showArea = false
                    this.$nextTick(() => {
                        this.index = 1
                        this.shopList = []
                        this.showShop = true
                    })
                } else {
                    this.showArea = true
                    this.changeArea(this.currentArea)
                }
            },
            infiniteHandler($state) {
                let url = '/getStoreDisplay/getAreaPage',
                    params = {
                        areaCode: this.currentArea.code || '',
                        size: 10,
                        current: this.index || 1
                    }
                this.shopLoad = true
                if (this.searchName) {
                    url = '/getStoreDisplay/getStorePage'
                    params.name = this.searchName
                }
                this.$http.get(url, params).then(result => {
                    this.shopLoad = false
                    this.shopList.push(...result.data.records)
                    if (result.data.pages <= result.data.current) {
                        $state.loaded()
                        $state.complete()
                    } else {
                        this.index += 1
                        $state.loaded()
                    }
                }).catch(() => {
                    this.shopLoad = false
                    $state.error()
                })
            },
            searchFocus() {
                this.saveBtnShow = true
            },
            searchBlur() {
                this.$method.inputBlur()
                // if (!this.searchName) this.saveBtnShow = false
            },
            back() {
                this.$router.back()
            },
            chooseShop(item) {
                if (item.kzCount >= item.onceCount) {
                    this.$emit('updateInfo', 'shop', item)
                    this.back()
                }
            }
        },
        components: {
            Search
        }
    }
</script>

<style scoped lang="less">
    .shop {
        background-color: #f4f4f4;

        .search {
            /deep/ .vux-search-box {
                .weui-search-bar {
                    padding: .15rem .2rem .15rem 0;
                    background-color: #f4f4f4;
                }

                .search-left {
                    line-height: .68rem;
                    font-size: .36rem;
                    padding: 0 .15rem;

                    i {
                        font-weight: bolder;
                    }
                }

                .weui-search-bar__form {
                    .weui-search-bar__box {
                        padding-left: .6rem;
                        padding-right: .6rem;

                        .weui-icon-search {
                            line-height: .68rem;
                            left: .15rem;
                            font-size: .28rem;
                        }

                        .weui-icon-clear {
                            line-height: .68rem;
                            font-size: .28rem;
                            padding: 0 .1rem;
                        }

                        .weui-search-bar__input {
                            padding: .1rem 0;
                            line-height: .48rem;
                            height: .48rem;
                        }
                    }

                    .weui-search-bar__label {
                        line-height: .64rem;

                        .weui-icon-search {
                            margin-right: .04rem;
                        }
                    }
                }

                .weui-search-bar__cancel-btn {
                    display: none;
                }

                .search-right {
                    button {
                        border: 0 none;
                        line-height: .68rem;
                        background-color: transparent;
                        color: #729bff;
                        padding: 0 .2rem;
                        margin-right: -.15rem;
                        font-size: .28rem;

                        &:active, &:hover {
                            border: 0 none;
                        }
                    }
                }
            }
        }

        .cont {
            .head {
                overflow-y: hidden;
                overflow-x: auto;
                white-space: nowrap;
                border-bottom: 1px solid #eee;
                background-color: #fff;

                .addr {
                    min-width: 19vw;
                    display: inline-block;
                    font-size: 0;
                    text-align: center;
                    padding: 0 .15rem;
                    position: relative;

                    > div {
                        font-size: .28rem;
                        line-height: .8rem;
                    }

                    &.active {
                        color: #729bff;

                        &:before {
                            content: '';
                            position: absolute;
                            bottom: 0;
                            left: 25%;
                            width: 50%;
                            height: .04rem;
                            background-color: #729bff;
                        }
                    }
                }
            }

            .list {
                background-color: #fff;
                padding: .15rem .2rem;
                border-top: 1px solid #eee;

                .name {
                    font-size: .32rem;
                    line-height: .56rem;
                }

                .address {
                    font-size: .24rem;
                    color: #999;
                }

                .tips {
                    font-size: .24rem;
                    color: #00bf53;

                    &.full {
                        color: #ff8872;
                    }
                }

                &:first-child {
                    border-top: 0 none;
                }
            }
        }

        .empty {
            text-align: center;
            padding-top: .5rem;
            color: #999;
        }

        .noMore {
            text-align: center;
            margin: .3rem 0;
            color: #999;
        }
    }
</style>
